<template>
  <div class="spaceConfig">
    <DividerTile title="样式配置" :isShow.sync="isShow"></DividerTile>
    <el-form v-show="isShow" size="small" label-width="90px">
      <el-form-item label="间距高度">
        <el-input-number v-model="height" :min="1" :max="100" @change="valueChange($event, 'style.height')"></el-input-number>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import DividerTile from '../../../dividerTile'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'spaceConfig',
  components: {
    DividerTile
  },
  data() {
    return {
      isShow: true,
      height: 0
    }
  },
  watch: {
    activeFormData: {
      handler(val) {
        const { height } = val.style
        this.height = height
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    ...mapState('pageData', ['activeFormData'])
  },
  methods: {
    ...mapMutations('pageData', ['SETPROP']),
    valueChange(value, key) {
      this.SETPROP({
        value,
        key
      })
    }
  }
}
</script>
